<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生管理</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
	</head>
	<body>
		<div id="app">
			<h1>学生管理</h1>
			<table>
				<thead>
					<tr>
						<th>学号</th>
						<th>姓名</th>
						<th>年龄</th>
						
					</tr>
				</thead>
				<tbody>
					<tr v-for="(stu, i) in stus">
						<td>{{ stu.id }}</td>
						<td>{{ stu.name }}</td>
						<td>{{ stu.age }}</td>
						<td>
							<button type="button" @click="del(i)">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<h2>添加学生</h2>
			学号: <input type="text" v-model="id"><br />
			姓名: <input type="text" v-model="name"><br />
			年龄: <input type="text" v-model="age"><br />
			
			<button @click="add">添加</button>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						id: '',
						name: '',
						age: '',
						img: '',
						inv: '',
						stus: [{
								id: 10001,
								name: "张三",
								age: 18
							},
							{
								id: 10002,
								name: "李四",
								age: 18
							}
						]
					}
				},
				methods: {
					add: function() {
						console.log(this.id + "," + this.name + "," + this.age)
						var stu = {
							id: parseInt(this.id),
							name: this.name,
							age: parseInt(this.age),
							img: this.img,
							inv: parseInt(this.inv)
						}
						this.stus.push(stu);
					},
					del: function(i) {
						// splice(指定位置，删除几个)
						this.stus.splice(i, 1)
					}
				}
			});
			var vm = app.mount("#app")
		</script>
	</body>
</html>
